<template>
  <h2>sum：{{ sum }}</h2>
  <button type="" @click="sum++">点击+1</button>
  <hr />
  <h2>msg：{{ msg }}</h2>
  <button type="" @click="msg += '！'">点击+！</button>
  <hr />
  <h2>{{ `姓名：${person.name}  年龄：${person.age}` }}</h2>
  <h2>薪水：{{ person.job.j1.salary }}K</h2>
  <button type="" @click="person.name += '~'">修改姓名</button>
  <button type="" @click="person.age++">增长年龄</button>
  <button type="" @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import { ref, watch, reactive } from "vue";
export default {
  name: "App",
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 15,
        },
      },
    });

    //情况一：监视ref定义的响应式数据
    watch(sum, (newVal, oldVal) => {
      console.log("sum的值变化了 :>> ", newVal, oldVal);
    });

    //情况二：监视多个ref定义的响应式数据
    // watch(
    //   [sum, msg],
    //   (newVal, oldVal) => {
    //     console.log("sum或msg的值变化了 :>> ", newVal, oldVal);
    //   },
    //   { immediate: true }
    // );
    // watch的第三个参数是，watch的配置，immediate，deep等

    /* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
    */
    // watch(person,(newVal, oldVal) => {
    //     console.log("person值变化了 :>> ", newVal, oldVal);
    // },{deep:true}) 此处deep配置无效

    //情况四：监视reactive定义的响应式数据中的某个属性
    // 监听reactive对象中的某一个值，必须传入一个函数，函数得有返回值
    // watch(()=>person.age,(newVal, oldVal) => {
    //     console.log("person的age变化了 :>> ", newVal, oldVal);
    // })

    //情况五：监视reactive定义的响应式数据中的某些属性
    //  watch([()=>person.age,()=>person.name],(newVal, oldVal) => {
    //   console.log("person的age变化了 :>> ", newVal, oldVal);
    //  })

    //特殊情况（此处因为监听的是reactive所定义对象中的某个属性，而这个属性依然是对象）
     watch(()=>person.job,(newVal, oldVal) => {
      console.log("person的job变化了 :>> ", newVal, oldVal,newVal.j1.salary,oldVal.j1.salary);
     },{deep:true}) //此处deep会生效

    return {
      sum,
      msg,
      person,
    };
  },
};
</script>
